<template>
  <div class="find">
    <!-- <h3>底部的发现 搜索</h3> -->

    <div class="setionone">
      <div class="top">
        <div class="set">
          <van-icon name="wap-nav" size="25px" />
        </div>
        <div class="souch">
          <van-search @click="$router.push('/search')"
            shape="round"
            background="#fff7f7"
            placeholder="请输入搜索关键词"
          />
        </div>
        <div class="bars"><van-icon name="bell" size="25" /></div>
      </div>

      <div class="topicon">
        <div class="toptwo" @click="changeTab(index, $event)">
          <div class="theme-list">
            <div class="fixed-nav" ref="fixednav">
              <div class="fixed-nav-content">
                <div class="tab-title">
                  <div class="allicon">
                    <van-icon name="apps-o" size="25px" />
                  </div>
                  <div class="icon-text">每日推荐</div>
                </div>
                <div class="tab-title">
                  <div class="allicon">
                    <van-icon name="service-o" size="25px" />
                  </div>
                  <div class="icon-text">私人FM</div>
                </div>
                <div class="tab-title">
                  <div class="allicon">
                    <van-icon name="music-o" size="25px" />
                  </div>
                  <div class="icon-text">歌单</div>
                </div>
                <div class="tab-title" @click="ViewSingerSong()">
                  <div class="allicon">
                    <van-icon name="bar-chart-o" size="25px" />
                  </div>
                  <div  class="icon-text">排行榜</div>
                </div>
                <div class="tab-title">
                  <div class="allicon">
                    <van-icon name="description" size="25px" />
                  </div>
                  <div class="icon-text">有声书</div>
                </div>
                <div class="tab-title">
                  <div class="allicon">
                    <van-icon name="medal-o" size="25px" />
                  </div>
                  <div class="icon-text">数字专辑</div>
                </div>
                <div class="tab-title">
                  <div class="allicon">
                    <van-icon name="friends-o" size="25px" />
                  </div>
                  <div class="icon-text">关注新歌</div>
                </div>
                <div class="tab-title">
                  <div class="allicon">
                    <van-icon name="underway-o" size="25px" />
                  </div>
                  <div class="icon-text">游戏专区</div>
                </div>
    
              </div>
            </div>
          </div>
          <hr />

          <!-- <div class="themeTow">
        <div class="fix-nav" ref="fixednav">
          <div class="fixed-nav-Two">
            <div 
            class="tab-title"
            >
              这里
            </div>
          </div>
        </div>
      </div> -->
        </div>
      </div>
      
      
    </div>
    <div id="swiperTop">
        <template>
      <van-swipe :autoplay="3000" >
      <van-swipe-item v-for="(item,index) in singSwpierTop " :key="index" > 
        
        <img class="swiperimg" :src="item.imageUrl" />
         
         </van-swipe-item>
         </van-swipe>

      </template>  
    </div>
    <IconList></IconList>
    <Musiclist></Musiclist>
  </div>
</template>

<script>
//引入图标库 使用图标
import IconList from '@/components/home/IconList.vue';
//发现好歌单
import Musiclist from '@/components/home/Musiclist.vue';

//另一个获取数据方式
import {getBanner} from '@/request/api/home'

import { mapMutations } from 'vuex';
// export{getBanner} from '../request/api/home'
 import axios from 'axios';
 import { reactive, onMounted } from 'vue';
export default {
  name: "Find",
  components:{
    IconList,
    Musiclist
  },

  setup() {
    const state = reactive( { 
     images:[
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
        ]
        
    } );
    
   
    //另一个获取数据的方法 可能不行
    // onMounted(async() => {
    //   // axios.get('http://localhost:8082/banner?type=2').then((res) => {
    //   //   console.log(res);
    //   //   state.images = res.data.banners
    //   //   console.log(state.images);
    //   // })
    //   let res = await getBanner()
    //   state.images = res.data.banners
    //   console.log(res);
    // })

    // onMounted(async ()=> {
    //   axios.get('http://localhost:8082//banner?type=2').then((res)=>{
    //     console.log(res);
    //    state.images = res.data.banners
    //   })
    //   //异步请求 async等待返回结果 vue3
    //   // let res = await getBanner();
    //   // console.log(res);
    //   // state.images = res.data.banners
    //   // console.log(state.images);
    // })
    return { state };
  },

  data(){
    return {
      singSwpierTop:[],

    };
  },
  created(){
    this.getSingSwpier()
  },
  methods:{
    ...mapMutations(["setIsMain"]),
    getSingSwpier(){
      this.axios({
        method:"get",
        url:'/banner?type=2',
        params:{
          type:2
        },

      }).then(res => {
        console.log("res==>",res);
        this.singSwpierTop = res.data.banners
        console.log("this.singSwpierTop==>",this.singSwpierTop);
      }).catch(err => {
        console.log("err==>",err);
      })
    },

    //跳转
    ViewSingerSong(){
         
         this.$router.push({name:"Danqu",});
      },
  }
};
</script>

<style lang="less" scoped>
.find {
  background-color: #f5f5f5;
  height: 100%;
  #swiperTop{
    /deep/.van-swipe__indicator--active{
        background-color: rgb(219, 130, 130);
      }
  .van-swipe{
    width: 100%;
    // height: 200px;
    .van-swipe__track{
      .van-swipe-item{
        width: 100%;
        // height: 200px;
        // padding: 0 0.2rem;
        font-size: 20px;
        color: #fff;
        width: 100%;
        
        img{
          display: inline-block;
          width: 100%;
          
          border-radius: 0.2rem;
        }
      }
     
    }
  }
}


  .setionone {
    background-color: #fff7f7;
    .top {
      padding: 16px 16px 0px 16px;
      display: flex;
      // justify-content: space-between;
      justify-items: center;
      align-items: center;
      align-content: center;

      .set {
      }
      .souch {
        width: 100%;
      }
    }


    .topicon {
      .toptwo {
        overflow-x: scroll;
        .theme-list {
          margin-top: 12px;
          margin: 5px 20px 15px 20px;
          .fixed-nav {
            overflow-x: scroll;

            // margin-right: 20px;
            .fixed-nav-content {
              display: flex;
              align-items: center;
            }
          }
        }
        hr{
            margin: 0;
            
        }
        .tab-title {
          margin-right: 20px;
          display: flex;
          align-items: center;
          flex-direction: column;
          .allicon {
            color: #ff4040;
            //   font-size: 15px;
            //   font-weight: 900;
              // margin: 5px 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            width: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #ffecec;
            border-radius: 50%;
            flex-shrink: 0;

          }
          .icon-text{margin-top: 5px;}
        }
        //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
        ::-webkit-scrollbar {
          width: 0.01rem;
          opacity: 0;
          display: none;
        }
        //定义滚动条轨道 内阴影加圆角
        ::-webkit-scrollbar-track {
          background-color: #fff;
          opacity: 0;
        }
        //定义滑块 内阴影加圆角
      }
    }

    .gedan {
      .tuijian {
        overflow-x: scroll;
        .gedan-list{
          margin-top: 12px;
          margin: 5px 20px 15px 20px;
          .gedan-content{
            overflow-x: scroll;

            // margin-right: 20px;
            .gedan-nav-content{
              display: flex;
            }
          }
        }
        hr{
            margin: 0;
            
        }
        .tab-title {
          margin-right: 20px;
          
          .allicon {
            color: #ff4040;
            //   font-size: 15px;
            //   font-weight: 900;
            //   margin: 0 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            width: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #ffecec;
            border-radius: 50%;
            flex-shrink: 0;
          }
        }
        //定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
        ::-webkit-scrollbar {
          width: 0.01rem;
          opacity: 0;
          display: none;
        }
        //定义滚动条轨道 内阴影加圆角
        ::-webkit-scrollbar-track {
          background-color: #fff;
          opacity: 0;
        }
        //定义滑块 内阴影加圆角
      }
    }
      
  }
}
</style>
